<template>
  <div id="businessTixianPage">

    <div class="flex_head">
      <div class="solid"></div>
      <div class="item_two">
        <el-button type="primary" @click="goBack()">返回商务组</el-button>
      </div>
    </div>

    <el-dialog title="提现" :visible.sync="dialogVisible" size="tiny">
      <el-form :model="form">
        <el-form-item label="银行名称" :label-width="formLabelWidth">
          <el-input v-model="form.cardBank" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号" :label-width="formLabelWidth">
          <el-input v-model="form.cardNo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="持卡人姓名" :label-width="formLabelWidth">
          <el-input v-model="form.cardPerson" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="预留手机号" :label-width="formLabelWidth">
          <el-input v-model="form.cardPhone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="提现金额" :label-width="formLabelWidth">
          <el-input v-model="form.amount" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="backup1" :label-width="formLabelWidth">
          <el-input v-model="form.backup1" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="backup2" :label-width="formLabelWidth">
          <el-input v-model="form.backup2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="backup3" :label-width="formLabelWidth">
          <el-input v-model="form.backup3" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="backup4" :label-width="formLabelWidth">
          <el-input v-model="form.backup4" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="backup5" :label-width="formLabelWidth">
          <el-input v-model="form.backup5" auto-complete="off"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="tixian">确 定</el-button>
  </span>
    </el-dialog>
    <el-table border :data="tableData" style="width: 100%" v-loading="loading">

      <el-table-column prop="id" label="ID" >
      </el-table-column>
      <el-table-column prop="account" label="商户号" >
      </el-table-column>
      <el-table-column prop="accountBalance" label="余额">
      </el-table-column>
      <el-table-column label="商户提现">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="changeStatus(scope.row.id)">提现</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: right;padding-right: 40px;">

      <el-pagination :current-page.sync="pageNumber" @current-change='handleChange' :page="pageNumber" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [],
        pageSize:10,
        pageNumber:1,
        total:1,
        loading:false,
        dialogVisible:false,
        formLabelWidth:'100px',
        form:{
          amount: '',
          cardNo: '',
          cardPhone: '',
          cardPerson: '',
          cardBank: '',
          backup1: '',
          backup2: '',
          backup3: '',
          backup4: '',
          backup5: ''
        }
      }
    },
    created(){
      this.getTixianList()
    },
    methods: {
      getTixianList(){
        this.loading = true
        let id = this.$route.query.id
        let params ={
          pageSize:this.pageSize,
          pageNumber:this.pageNumber
        }
        this.$api.getTixianBusinessList(id,params).then(res=>{
          this.tableData = res.data.list;
          this.total = res.data.totalRow
          this.loading = false
          this.$message.success("获取提现商户列表成功")
        })
      },
      changeStatus(id){
        this.dialogVisible = true;
        for(let i in this.form){
          this.form[i] = ''
        }
        sessionStorage.setItem("businessTixianId",id)
      },
      tixian(){
        this.dialogVisible = false;
        this.form.businessId = sessionStorage.getItem("businessTixianId")
        this.$api.tixainBack(this.form).then(res=>{
          if(res.code === '000000'){
            this.$message.success("提现成功")
          }
        })
      },
      goBack () {
        this.$router.go(-1)
      },
      handleChange(val){
        this.pageNumber = val;
        this.getTixianList()
      }
    }
  }
</script>

<style lang="less">
  #businessTixianPage{
    th{
      text-align: center;
    }
  }
</style>
